<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">


    <link rel="stylesheet" href="/static/plugins/fontawesome-free/css/all.min.css">
    <link rel="stylesheet"
          href="/static/plugins/tempusdominus-bootstrap-4/css/tempusdominus-bootstrap-4.min.css">
    <link rel="stylesheet" href="/static/plugins/icheck-bootstrap/icheck-bootstrap.min.css">
    <link rel="stylesheet" href="/static/plugins/jqvmap/jqvmap.min.css">
    <link rel="stylesheet" href="/static/css/adminlte.min.css">
    <link rel="stylesheet" href="/static/css/common.css">
    <link rel="stylesheet" href="/static/plugins/overlayScrollbars/css/OverlayScrollbars.min.css">
    <link rel="stylesheet" href="/static/plugins/daterangepicker/daterangepicker.css">

    <link rel="stylesheet" href="/static/plugins/summernote/summernote-bs4.min.css">
    <script src="/static/plugins/jquery/jquery.min.js"></script>
    <script src="/static/plugins/jquery-ui/jquery-ui.min.js"></script>
<script src="/static/plugins/layer/layer.js"></script>
<script src="pip/static/plugins/layer/skin/layer.css"></script>


</head>
<body class="hold-transition sidebar-mini layout-fixed">
<div class="wrapper">
    <nav class="main-header navbar navbar-expand navbar-white navbar-light">
        <ul class="navbar-nav">
            <li class="nav-item">
                <a class="nav-link" data-widget="pushmenu" href="#" role="button"><i class="fas fa-bars"></i></a>
            </li>
            <li class="nav-item d-none d-sm-inline-block">
                <a href="http:////basic/index" class="nav-link">首页</a>
            </li>
        </ul>
        <ul class="navbar-nav ml-auto">
            <li class="nav-item">
                <a class="nav-link" data-widget="fullscreen" href="#" role="button">
                    <i class="fas fa-expand-arrows-alt"></i>
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" data-widget="control-sidebar" data-slide="true" href="#" role="button">
                    <i class="fas fa-th-large"></i>
                </a>
            </li>
        </ul>
    </nav>
    <aside class="main-sidebar sidebar-dark-primary elevation-4">
        <a href="http:////basic/index" class="brand-link">
            <img src="http:////static/img/AdminLTELogo.png" alt="AdminLTE Logo"
                 class="brand-image img-circle elevation-3" style="opacity: .8">
            <span class="brand-text font-weight-light">商城管理系统</span>
        </a>
        <div class="sidebar">
            <div class="user-panel mt-3 pb-3 mb-3 d-flex">
                <div class="image">
                    <img src="http:////static/img/user2-160x160.jpg" class="img-circle elevation-2" alt="User Image">
                </div>
                <div class="info"><p>







                </div>
            </div>
            <nav class="mt-2">
                <ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu"
                    data-accordion="false">
                    <li class="nav-header">商品管理</li>

                        <li class="nav-item">
                            <a href="http:////cates/index" class="nav-link">
                                <i class="nav-icon far fa-image"></i>
                                <p>
                                    商品分类
                                </p>
                            </a>
                        </li>


                        <li class="nav-item">
                            <a href="http:////goods/index" class="nav-link">
                                <i class="nav-icon far fa-image"></i>
                                <p>
                                    商品信息
                                </p>
                            </a>
                        </li>


                        <li class="nav-item">
                            <a href="http:////goods/slide_index" class="nav-link">
                                <i class="nav-icon far fa-image"></i>
                                <p>
                                    商品轮播
                                </p>
                            </a>
                        </li>

                    <li class="nav-header">基础信息管理</li>


                        <li class="nav-item">
                            <a href="http:////members/index" class="nav-link">
                                <i class="nav-icon far fa-circle text-danger"></i>
                                <p class="text">会员管理</p>
                            </a>
                        </li>


                        <li class="nav-item">
                            <a href="http:////goods/index" class="nav-link">
                                <i class="nav-icon far fa-circle text-warning"></i>
                                <p>地址管理</p>
                            </a>
                        </li>


                    <li class="nav-header">订单管理</li>


                        <li class="nav-item">
                            <a href="http:////goods/index" class="nav-link">
                                <i class="nav-icon far fa-circle text-danger"></i>
                                <p class="text">订单列表</p>
                            </a>
                        </li>
                </ul>
            </nav>
        </div>
    </aside>

    <div class="content-wrapper">
        <div class="content-header">
            <div class="container-fluid">
                <div class="row mb-2">
                    <div class="col-sm-6">
                        <h1 class="m-0">商城相关信息</h1>
                        <div class="col-sm-6">
                        </div>
                    </div>
                </div>
            </div>
            <section class="content">
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-lg-4 col-6">
                            <div class="small-box bg-info">
                                <div class="inner">
                                    <h3>18</h3>
                                    <p>订单数量</p>
                                </div>
                                <div class="icon">
                                    <i class="ion ion-bag"></i>
                                </div>
                                <a href="http:////members/index" class="small-box-footer">更多 <i
                                        class="fas fa-arrow-circle-right"></i>
                                </a>
                            </div>
                        </div>
                        <div class="col-lg-4 col-6">
                            <div class="small-box bg-success">
                                <div class="inner">
                                    <h3>9</h3>
                                    <p>会员数量</p>
                                </div>
                                <div class="icon">
                                    <i class="ion ion-stats-bars"></i>
                                </div>
                                <a href="http:////members/index" class="small-box-footer">更多 <i
                                        class="fas fa-arrow-circle-right"></i>
                                </a>
                            </div>
                        </div>
                        <div class="col-lg-4 col-6">
                            <div class="small-box bg-warning">
                                <div class="inner">
                                    <h3>3</h3>
                                    <p>商品数量</p>
                                </div>
                                <div class="icon">
                                    <i class="ion ion-person-add"></i>
                                </div>
                                <a href="http:////members/index" class="small-box-footer">更多 <i
                                        class="fas fa-arrow-circle-right"></i>
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <section class="col-lg-6 connectedSortable">
                            <div class="card card-danger">
                                <div class="card-header">
                                    <h3 class="card-title">商品信息统计</h3>
                                    <div class="card-tools">
                                        <button type="button" class="btn btn-tool" data-card-widget="collapse">
                                            <i class="fas fa-minus"></i>
                                        </button>
                                        <button type="button" class="btn btn-tool" data-card-widget="remove">
                                            <i class="fas fa-times"></i>
                                        </button>
                                    </div>
                                </div>
                                <div class="card-body">
                                    <div id="Chart1" style="width: 600px;height:400px;"></div>
                                </div>
                            </div>
                        </section>
                        <section class="col-lg-6 connectedSortable">
                            <div class="card card-success">
                                <div class="card-header">
                                    <h3 class="card-title">会员注册情况</h3>
                                    <div class="card-tools">
                                        <button type="button" class="btn btn-tool" data-card-widget="collapse">
                                            <i class="fas fa-minus"></i>
                                        </button>
                                        <button type="button" class="btn btn-tool" data-card-widget="remove">
                                            <i class="fas fa-times"></i>
                                        </button>
                                    </div>
                                </div>
                                <div class="card-body">
                                    <div class="chart">
                                        <div id="Chart2" style="width: 600px;height:400px;"></div>
                                    </div>
                                </div>
                            </div>
                        </section>
                    </div>
                </div>
            </section>
        </div>
        <script src="http:////static/js/echarts.min.js"></script>
        <script type="text/javascript">
            //基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('Chart1'));
            //指定图表的配置项和数据
            var option = {
                title: {
                    text: '商品信息统计'
                },
                tooltip: {},
                legend: {
                    data: ['销量']
                },
                xAxis: {
                    data: ['大枣', '葡萄干', '黑加仑']
                },
                yAxis: {},
                series: [{
                    name: '销量',
                    type: 'bar',
                    data: [16, 5, 3],
                }]
            };
            // 使用指定的配置项和数据显示图表。
            myChart.setOption(option);
        </script>

        <script type="text/javascript">
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('Chart2'));
            // 指定图表的配置项和数据
            var option = {
                title: {
                    text: '会员性别分布饼图',
                    x: 'center'
                },
                tooltip: {},
                legend: {
                    data: ['注册量']
                },
                series: [{
                    name: '性别',
                    type: 'pie',
                    radius: ['50%', '70%'],
                    avoidLabelOverlap: false,
                    label: {
                        show: true,
                        position: 'left',
                        formatter: '{b}: {c} ({d}%)'
                    },
                    itemStyle: {
                        color: function (colors) {
                            var colorList = [
                                '#fc8251',
                                '#5470c6',
                                '#9A60B4',
                                '#ef6567',
                                '#f9c956',
                                '#3BA272'
                            ];
                            return colorList[colors.dataIndex];
                        }
                    },
                    data: [
                        {value:6, name: "男性"},
                        {value:3, name: "女性"}
                    ],
                }],
                legend: {
                    orient: 'vertical',
                    left: 'left',
                    data: ["男性", "女性"]
                }
            };
            // 使用指定的配置项和数据显示图表。
            myChart.setOption(option);
        </script>

    <br><br>
    <footer class="main-footer">
        <strong>Copyright &copy; 2014-2020 <a href="https://adminlte.io">AdminLTE.io</a>.</strong>
        All rights reserved.
        <div class="float-right d-none d-sm-inline-block">
            <b>Version</b> 3.1.0-rc
        </div>
    </footer>
    <aside class="control-sidebar control-sidebar-dark">
    </aside>
</div>

<script src="http:////static/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="http:////static/plugins/chart.js/Chart.min.js"></script>
<script src="http:////static/js/adminlte.js"></script>
<script src="http:////static/js/demo.js"></script>


</body>
</html>